<template>
    <div style="margin: 10px 0px;">
        <el-form ref="form" :rules="rules" :model="form" label-width="0px">
            <el-table :data="form.variant" style="width: 100%" border>
                <el-table-column label="正确数量" align="left">
                    <template #default="scope">
                        <el-form-item label-width="0" :prop="'variant.' + scope.$index + '.rightNumber'" :rules="[
                            { required: true, validator: (rule, value, callback) => {
                                var myreg = /^(-|[0-9])\d*$/;
                                if (!value) {
                                    callback(new Error('请输入正确数量'))
                                } else if (!myreg.exec(value)) {
                                    callback(new Error('只能输入整数'))
                                } else {
                                    callback()
                                }
                            }},
                        ]">
                            <el-input v-model="scope.row.rightNumber" placeholder="请输入正确数量" readonly></el-input>
                        </el-form-item>
                    </template>
                </el-table-column>
                <el-table-column label="词汇量" width="120" align="center">
                    <template #default="scope">
                        <el-form-item label-width="0" :prop="'variant.' + scope.$index + '.words'" :rules="[
                            { required: true, validator: (rule, value, callback) => {
                                var myreg = /^(-|[0-9])\d*$/;
                                if (!value) {
                                    callback(new Error('请输入词汇量'))
                                } else if (!myreg.exec(value)) {
                                    callback(new Error('只能输入整数'))
                                } else {
                                    callback()
                                }
                            }},
                        ]">
                            <el-input v-model="scope.row.words" placeholder="请输入词汇量"></el-input>
                        </el-form-item>
                    </template>
                </el-table-column>
                <!-- <el-table-column label="操作" fixed="right" align="center" width="80">
                    <template #default="scope">
                        <el-button link type="primary" size="mini" @click="delItem(scope.$index)">删除</el-button>
                    </template>
                </el-table-column> -->
            </el-table>
        </el-form>
        <!-- <div style="margin-top: 6px;">
            <el-button icon="Plus" size="mini" @click="addItem">添加</el-button>
        </div> -->
    </div>
</template>

<script>
export default {
    components: {
        
	},
    props: {
        variant: {
            type: Array,
            default: [],
        }
    },
    watch: {
        variant: {
            deep: true,
			immediate: true,
			handler(newVal) {
                this.form.variant = JSON.parse(JSON.stringify(newVal))
			}
		}
    },
    data() {
        return {
            form: {
                variant: []
            },
            rules: {}
        }
    },
    methods: {
        /**
         * 添加
         */
        addItem() {
            this.form.variant.push({id: '', rightNumber: '', words: '' })
            this.$emit('change')
        },

        /**
         * 删除
         */
        delItem(index) {
            this.form.variant.splice(index, 1)
            this.$emit('change')
        },

        /**
         * 获取数据
         */
        getVariants() {
            let variants = []
            this.form.variant.forEach(item => {
                variants.push({ id: item.id, rightNumber: item.rightNumber, words: item.words  })
            })
            return variants
        }
    }
}
</script>

<style scoped>
:deep(.alert-icon-tooltip .el-button) {
    height: unset;
}
:deep(.el-form-item) {
    margin-bottom: 14px;
}
</style>